<template>
  <div class="function-btn-com">
    <div class="left-btn">
      <div class="title">网络分析</div>
    </div>
    <div class="right-btn">
      <!-- 保存  -->
      <a-dropdown>
        <a-tooltip placement="top">
          <template slot="title">
            <span>保存到本地</span>
          </template>
          <div class="graph-analysis-btn">
            <a-icon-font type="iconxiazaibendi" />
          </div>
        </a-tooltip>
        <a-menu slot="overlay">
          <a-menu-item @click="graphBuildExport('json')"
            >保存为JSON文件</a-menu-item
          >
          <a-menu-item @click="graphBuildExport('csv')"
            >保存为CSV文件</a-menu-item
          >
          <a-menu-item @click="graphBuildExport('gml')"
            >保存为GML文件</a-menu-item
          >
        </a-menu>
      </a-dropdown>

      <a-popover
        :visible="loadToAnalysisPopover"
        :destroy-tooltip-on-hide="true"
        placement="bottom"
        trigger="click"
        @visibleChange="loadToAnalysisToggle"
      >
        <div slot="content" class="load-analysis-section">
          <div class="popover-title">加载到图分析</div>
          <div class="save-item define-name">
            <span class="item-left">命名为：</span>
            <a-input
              v-model="graphAnalysisName"
              placeholder="图分析"
              size="small"
              class="graph-name"
            />
          </div>
          <div class="cancel-confirm-btn">
            <a-button
              class="set-btn"
              size="small"
              @click="loadToAnalysisPopover = false"
              >取消
            </a-button>
            <a-button
              class="set-btn"
              type="primary"
              size="small"
              @click="loadToGraphAnalysis"
              >加载
            </a-button>
          </div>
        </div>
        <a-tooltip placement="top">
          <span slot="title">加载到图分析</span>
          <span
            class="graph-analysis-btn"
            :class="{ 'prohibit-edit': !isGraphSelfCreate }"
          >
            <a-icon-font type="iconqiehuantufenxibeifen2" />
          </span>
        </a-tooltip>
      </a-popover>
      <!-- 隐藏标签 -->
      <a-tooltip placement="top">
        <span slot="title">{{ isLabelShow ? '隐藏' : '显示' }}标签</span>
        <span
          class="graph-analysis-btn"
          :class="{ 'select-current-function': isLabelShow }"
          @click="updateLabelShow"
        >
          <a-icon-font type="iconyincang" />
        </span>
      </a-tooltip>
      <!-- 框选和套索 -->
      <box-choose-lasso-popover
        :box-or-lasso="boxOrLasso"
        :lasso-enable="lassoEnable"
        :box-selection-enable="boxSelectionEnable"
        @select-mode="selectMode"
      />
      <!-- 最短路径 -->
      <a-tooltip placement="top">
        <span slot="title">最短路径</span>
        <span
          class="graph-analysis-btn"
          :class="{ 'select-current-function': selectedPath }"
          @click="toggleNodePath"
        >
          <a-icon-font type="iconzuiduanlujing" />
        </span>
      </a-tooltip>
      <!-- 删除 -->
      <a-tooltip placement="top">
        <span slot="title">删除</span>
        <span
          class="graph-analysis-btn"
          :class="{ 'prohibit-edit': !isGraphSelfCreate }"
          @click="batchDeleteNode"
        >
          <a-icon-font type="iconicon-beifen5" />
        </span>
      </a-tooltip>
      <!-- <span class="divider"></span> -->
      <!-- 保存 -->
      <!-- <save-popover
        :show="savePopoverShow"
        @visible-change="(visible) => (savePopoverShow = visible)"
        @cancel="savePopoverShow = false"
        @confirm="saveWidget"
      /> -->
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Emit, Prop } from 'vue-property-decorator'
import BoxChooseLassoPopover from '@/components/graph/BoxChooseLassoPopover.vue'
import SavePopover from '@/components/graph/SavePopover.vue'
import DataViewStore from '@/store/modules/dataview'
import GraphAnalysis from '@/store/modules/graphanalysis'
import { loadToAnalysis } from '@/api/visualization'
import { baseURL } from '@/api/axios-config'
import GraphBuild from '@/store/modules/graphbuild'
import noPermissionPrompt from '@/components/graph/user-permissions'

@Component({
  components: { BoxChooseLassoPopover, SavePopover },
})
export default class ModelAnalysisHeader extends Vue {
  @Prop({ type: Boolean, default: false }) isLabelShow: boolean = false

  public boxOrLasso: number = 1 // 只是为了 显示 icon
  @Prop() lassoEnable: any
  @Prop() boxSelectionEnable: any
  @Prop() selectedPath: boolean = false

  public savePopoverShow: boolean = false

  private loadToAnalysisPopover: boolean = false // 加载到图分析的 popover
  private graphAnalysisName: string = '' // 图命名名称

  // 是否没有编辑权限（图构建创建者）
  public get isGraphSelfCreate() {
    return GraphBuild.isGraphSelfCreate
  }

  public mounted() {
    document.addEventListener('keyup', this.globalKeyUp)
  }

  public beforeDestroy() {
    document.removeEventListener('keyup', this.globalKeyUp)
  }

  public get graphId(): number {
    return Number.parseInt(localStorage.getItem('graphId') || '0', 10)
  }

  @Emit('toggle-label')
  public updateLabelShow() {
    return this.isLabelShow
  }

  public graphBuildExport(format: string) {
    // graph/download?graphId=1236&format=json
    window.open(
      `${baseURL}/graph/download?graphId=${this.graphId}&format=${format}`
    )
  }

  public loadToAnalysisToggle() {
    if (!this.isGraphSelfCreate) {
      noPermissionPrompt()
      return
    }
    this.loadToAnalysisPopover = !this.loadToAnalysisPopover
  }

  /**
   * 将当前图加载到图分析
   */
  public loadToGraphAnalysis() {
    const projectId: number = DataViewStore.projectId
      ? DataViewStore.projectId
      : Number(this.$route.params.id)
    const data: any = {
      projectId,
      graphId: this.graphId,
      name: this.graphAnalysisName || null,
    }
    loadToAnalysis({ data }).then((response: any) => {
      if (response.data.code === 100) {
        GraphAnalysis.setLoadToGraphAnalysisId(response.data.result.graphId)
        GraphAnalysis.setLoadIdId(response.data.result.loadId)
        this.$router.push(`/project/${projectId}/graph-analysis`)
      }
    })
  }

  /**
   * 选择了套索或 框选 $emit
   */
  public selectMode(mode: number) {
    this.boxOrLasso = mode
    this.$emit('box-lasso-enable', this.boxOrLasso)
  }

  public toggleNodePath() {
    this.$emit('toggle-path')
  }

  @Emit('delete-element')
  public batchDeleteNode() {
    return { type: 'icon' }
  }

  @Emit('save-widget')
  public saveWidget(graphName: string) {
    this.savePopoverShow = false
    return graphName
  }

  /**
   * 快捷键监听
   * @param $event
   */
  public globalKeyUp($event: KeyboardEvent) {
    const isMac = /macintosh|mac os x/i.test(navigator.userAgent)
    if (isMac) {
      if ($event.shiftKey && $event.key === 'Backspace') {
        this.batchDeleteNode()
      }
      return
    }
    if ($event.key === 'Delete') {
      this.batchDeleteNode()
    }
  }
}
</script>

<style scoped lang="less">
/* 功能按钮 */
.function-btn-com {
  align-items: center;
  background-color: #fff;
  border-bottom: 1px solid #e9e9e9;
  box-sizing: border-box;
  display: flex;
  height: 38px;
  justify-content: space-between;
  padding: 0 10px;
  width: 100%;

  .left-btn {
    .title {
      color: #5d637e;
      font-size: 14px;
      font-weight: 500;
      letter-spacing: 1px;
    }
  }

  .left-btn,
  .right-btn {
    align-items: center;
    display: flex;

    .divider {
      background-color: #5d637e;
      height: 16px;
      margin: 0 5px;
      width: 1px;
    }

    .graph-analysis-btn {
      align-items: center;
      border-radius: 2px;
      color: #5d637e;
      cursor: pointer;
      display: flex;
      font-size: 16px;
      margin: 0 4px;
      padding: 6px;
      position: relative;

      &:hover {
        background-color: rgba(105, 115, 255, 0.1);
        color: #6973ff;
      }
    }

    // 禁用
    .prohibit-edit {
      align-items: center;
      border-radius: 2px;
      color: #5d637e;
      cursor: not-allowed;
      display: flex;
      font-size: 16px;
      margin: 0 4px;
      opacity: 0.5;
      padding: 6px;
      position: relative;

      &:hover {
        background-color: rgba(105, 115, 255, 0.1);
      }
    }

    .select-current-function {
      color: #6973ff;
    }
  }
}

.load-analysis-section {
  display: inline-block;
  // width: 100%;
  // title
  .popover-title {
    color: #373b52;
    font-size: 14px;
    font-weight: 500;
    height: 20px;
    letter-spacing: 1px;
    line-height: 20px;
    margin-bottom: 8px;
  }

  // 位置 命名为
  .save-item {
    align-items: center;
    color: #5d637e;
    display: flex;
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 8px;
    width: 100%;

    .item-left {
      display: inline-block;
      height: 20px;
      letter-spacing: 1px;
      line-height: 20px;
      text-align: right;
      width: 60px;
    }

    // 保存位置
    .save-location {
      cursor: pointer;
      display: inline-block;
      height: 20px;
      letter-spacing: 1px;
      line-height: 20px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: calc(100% - 60px);
    }
  }

  // 命名
  .define-name {
    .graph-name {
      width: calc(100% - 60px);
    }
  }

  // 确定按钮
  .cancel-confirm-btn {
    display: flex;
    justify-content: flex-end;
    padding-top: 8px;

    .set-btn {
      margin-left: 8px;
    }
  }
}
</style>
